<template>
  <div>
    <h3>{{ props.a }} --- {{ props.b }}</h3>
    <button @click="getProps">props</button>
    <br />
    <button @click="fn">吧子组件的参数传给父组件</button>
  </div>
</template>

<script setup>
// defineProps 用在子组件里面
import { defineProps, useAttrs, defineEmits, defineExpose } from "vue";
// let props = defineProps(["a", "b"]);
let props = defineProps({
  a: String,
  b: {
    type: String,
    default: "1000", // 如果父组件不传b的话 就使用这个默认的1000
  },
});

let getProps = () => {
  console.log(props.a, props.b);
};

let emit = defineEmits(); // 返回值emit 等价于 this.$emit/context.emit。defineEmits的参数就是准备发射的事件名称列表
let fn = () => {
  emit("getlists", [1, 2, 3, 4, 5]);
};

let attrs = useAttrs(); // 父组件传入但子组件未接收的数据 在useAttrs里面保存
console.log(attrs); // 是个proxy 具备响应式

// 子组件里面定义属性和方法让父组件使用
let item = "项目";
let size = 100;
const testFun = () => {
  console.log("触发了");
};
// 向父组件暴漏当前子组件的数据和方法，让父组件使用
defineExpose({
  item,
  size,
  testFun,
});
</script>

<style lang="scss" scoped></style>
